<template>
  <div class="container">
    <el-card shadow="always">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input
            maxlength="50"
            v-model="query.searchValue"
            clearable
            placeholder="请输入被检测单位名称"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-select v-model="query.salesType" placeholder="请选择品种类别">
            <el-option
              v-for="item in [
                { text: '品种类别', value: '' },
                { text: '食物原料', value: '食物原料' },
                { text: '成品', value: '成品' },
                { text: '餐具', value: '餐具' },
              ]"
              :key="item.text"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="query.quickCheckResult"
            placeholder="请选择检测结果"
          >
            <el-option
              v-for="item in [
                { text: '检测结果', value: '' },
                { text: '阴性', value: '阴性' },
                { text: '疑似阳性', value: '疑似阳性' },
              ]"
              :key="item.text"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <!-- <el-col :span="4">
          <el-select v-model="value" placeholder="请选择考核结果" clearable>
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-col> -->
        <el-col :span="2">
          <el-button type="primary" @click="query.page=1;getList()">查询</el-button>
        </el-col>
      </el-row>
      <rz-height></rz-height>

      <el-table :data="tableData" border style="width: 100%">
        被查单位、采样日期、品种名称(食物原料->生菜)、检测日期、检测项目(重金属->铅)、检测结果、检测单位
        <el-table-column prop="supUnitName" label="被查单位"> </el-table-column>
        <el-table-column prop="samplingTimeStr" label="采样日期" width="150">
        </el-table-column>
          <el-table-column prop="salesType" label="品种类别">
        </el-table-column>
        <el-table-column prop="salesSubItemName" label="品种名称">
              <template slot-scope="scope">
                <div>
                  {{scope.row.salesItemName}}--
                  {{scope.row.salesSubItemName}}
                </div>
              </template>
        </el-table-column>
          <el-table-column prop="quickCheckDateStr" label="检测日期" width="150">
        </el-table-column>
             <el-table-column prop="quickCheckItemName" label="检测项目">
               <template slot-scope="scope">
                <div>
                  {{scope.row.quickCheckItemName}}--
                  {{scope.row.quickCheckSubItemName}}
                </div>
              </template>
        </el-table-column>
      
        <el-table-column prop="quickCheckResult" label="检测结果" >
          <template slot-scope="scope">
            <div class="green" v-if="scope.row.isDelete == 1">阴性</div>
            <div class="red" v-else>
              {{ scope.row.quickCheckResult }} (<span
                v-if="scope.row.isDelete == 2"
                >复测合格</span
              >
              <span v-else-if="scope.row.isDelete == 3"
                >下架暂停销售并销毁</span
              >
              <span v-else-if="scope.row.isDelete == 4"
                >重新清洗消毒(餐饮具)</span
              ><span v-else-if="scope.row.isDelete == 5"
                >上报转法检</span
              >)
            </div>
          </template>
        </el-table-column>
   
        
        <el-table-column prop="quickType" label="检测类别">
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="view(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        @pagination="getList"
        :page.sync="query.page"
      />
    </el-card>
    <rz-dialog
      :dialogVisible.sync="dialogVisible"
      :isShowConfirm="false"
      title="查看食安检测"
    >
      <el-form label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="采样时间">
              {{ data.samplingTime }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查单位">
              {{ data.supUnitName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人"> {{ data.supName }} </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              {{ data.supTel }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="品种类型"> {{ data.salesType }} </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="品种分类">
              {{ data.salesItemName }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="品种名称">
              {{ data.salesSubItemName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测时间">
              {{ data.quickCheckDate }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="检测类别"> {{ data.quickType }} </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测人">
              {{ data.quickChecker }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="检测机构">
              {{ data.quickUnitName }}
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <div  class="title">检测项目列表</div> -->

        <el-row>
          <el-col :span="12">
            <el-form-item label="检测项目">
              {{ data.quickCheckItemName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测项目小类">
              {{ data.quickCheckSubItemName }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="实测值">
              {{ data.quickCheckResultValue||"--" }}
              {{ data.quickCheckResultValueUnit }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="范围值">
              {{ data.quickCheckResultRangeValue||"--" }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="检测结果">
              {{ data.quickCheckResult }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测依据">
              {{ data.quickCheckResultDependOn||"--" }}
            </el-form-item>
          </el-col>
        </el-row> 
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="检测项目"> {{ data.quickCheckItemName }} </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测项目小类">
              {{ data.quickCheckSubItemName }}
            </el-form-item>
          </el-col>
        </el-row> -->

        <template v-if="data.operationDate">
            <div>
                <div class="title">处理信息</div>
              <el-row>
          <el-col :span="12">
            <el-form-item label="处理时间"> {{ data.operationDate }} </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理结果">
               <div><span
                v-if="data.isDelete == 2"
                >复测合格</span
              >
              <span v-else-if="data.isDelete == 3"
                >下架暂停销售并销毁</span
              >
              <span v-else-if="data.isDelete == 4"
                >重新清洗消毒(餐饮具)</span
              ><span v-else-if="data.isDelete == 5"
                >上报转法检</span
              >
            </div>
            </el-form-item>
          </el-col>
        </el-row>
             <el-row>
          <el-col :span="12">
            <el-form-item label="处理重量"> {{ data.handlingWeight }}公斤 </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购来源">
              {{ data.purchaseSource }}
            </el-form-item>
          </el-col>
        </el-row>
            </div>
        </template>
        <el-form-item label="检测照片">
          <el-image
            v-for="(index, item) in data.imgList"
            :key="item"
            style="width: 150px; height: 150px;margin-right:10px"
            :src="index.fileUrl"
            fit="cover"
            :preview-src-list="data.imgList.map((x) => x.fileUrl)"
          ></el-image>
        </el-form-item>
      </el-form>
    </rz-dialog>
  </div>
</template>
<script>
//
import {
  quickListByCondition,
  quickFindResponseById,
} from "@/api/modules/workstation";
export default {
  // props:[],
  // 页面加载
  created() {
    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      //   options: ["合格", "不需要考核"],
      query: {
        salesType: "",
        quickCheckResult: "",
        isPage: 0,
        page: 1,
        pageSize: 10,
        searchValue: "",
        workStationId: sessionStorage.getItem("workId"),
      },
      tableData: [],
      total: 0,
      dialogVisible: false,
      data: {},
    };
  },
  // 方法
  methods: {
    getList() {
      quickListByCondition(this.query).then((res) => {
        // res.data.forEach((x) => {
        //   for (const key in x) {
        //     if (!x[key]) {
        //       x[key] = "--";
        //     }
        //   }
        // });
        this.total = res.totalCount;
        this.tableData = res.data;
      });
    },
    view(e) {
      quickFindResponseById({
        params: { id: e.id },
      }).then((res) => {
        this.data = res.data;
        this.dialogVisible = true;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.title{
    font-weight: 700;
    font-size: 16px;
}
</style>